<template>
	<view class="music-list" v-if="!isLoading">
		<view class="fixbg" :style="{ 'background-image': 'url(' + playList.coverImgUrl + ')' }"></view>
		<music-head :title="playList.name" color="white"></music-head>

		<view class="scroll-container">
      <scroll-view scroll-y="true">
        <view class="list-head">
					<view class="list-head-img">
						<image :src="playList.coverImgUrl" mode="widthFix"></image>
						<text class="iconfont icon-bofang">{{playList.playCount | formatCount}}</text>
					</view>
					<view class="list-head-text">
						<view>{{playList.name}}</view>
						<view v-if="playList.creator"><image :src="playList.creator.avatarUrl" mode="aspectFill"></image>{{playList.creator.nickname}}</view>
						<view>{{playList.description}}</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="list-share">
					<text class="iconfont icon-fenxiang"></text>分享给微信好友 
				</button>
				<!-- #endif -->
				<view class="list-music">
					<view class="list-music-head">
						<text class="iconfont icon-playCircle"></text>
						<text>播放全部</text>
						<text>(共{{playList.trackCount}}首)</text>
					</view>
					<!-- <view class="list-music-item">
						<view class="list-music-left">1</view>
						<view class="list-music-song">
							<view>与我无关</view>
							<view>
								<image src="../../static/images/dujia.png"></image>阿冗 - 与我无关 
							</view>
						</view>
						<text class="iconfont icon-playCircle"></text>
					</view> -->
					<view class="list-music-item" v-for="(item, index) in playList.tracks" :key="item.id" @tap="handleToDetail(item.id)">
						<view class="list-music-left">{{ index + 1}}</view>
						<view class="list-music-song truncate">
							<view class="truncate">{{item.name}}</view>
							<view class="truncate">
								<image v-if="privileges[index] && privileges[index].flag > 60" src="../../static/images/dujia.png"></image>
								<image v-if="privileges[index] && privileges[index].maxbr === 999000 " src="../../static/images/sq.png"></image>
								<text class="truncate">{{ item.ar[0].name }} - {{item.name}}</text>
							</view>
						</view>
						<text class="iconfont icon-playCircle"></text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MusicHead from '../../components/musichead/musichead';
	import { playListDetail } from '../../common/api'
	export default {
		components: { MusicHead },
		data() {
			return {
				playList: {},
				privileges: [],
				isLoading: true
			}
		},
		methods: {
			handleToDetail(id) {
				uni.navigateTo({
					url: '/pages/music-detail/music-detail?id=' + id
				});
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			});
			this.isLoading = true
			playListDetail(options.id).then(res => {
				this.playList = res.playlist
				this.privileges = res.privileges
				uni.hideLoading();
				this.isLoading = false
				this.$store.commit('INIT_TOPLISTIDS', res.playlist.trackIds)
			})
		}
	}
</script>

<style scoped lang="less">
.list-head { display: flex; margin: 30rpx; }
.list-head-img { width: 264rpx; height: 264rpx; border-radius: 12rpx; overflow: hidden; position: relative;flex: none; margin-right: 36rpx; }
.list-head-img text { position: absolute; top: 8rpx; right: 8rpx; color: white; font-size: 26rpx; }
.list-head-text { color: #f0f2f7 }
.list-head-text view:nth-child(1) { color: white; font-size: 34rpx; }
.list-head-text view:nth-child(2){ display: flex; align-items: center; margin: 20rpx 0;font-size: 24rpx; }
.list-head-text view:nth-child(2) image { width: 54rpx; height: 54rpx; border-radius: 50%; margin-right: 14rpx; }
.list-head-text view:nth-child(3) { line-height: 34rpx; font-size: 22rpx; }

.list-share { width: 330rpx; height: 74rpx; margin: 0 auto; background-color: rgba(0, 0, 0, .3); border-radius: 37rpx; color: white; text-align: center; line-height: 72rpx; font-size: 28rpx; }
.list-share text { margin-right: 12rpx; font-size: 36rpx; }

.list-music { border-radius: 40rpx; background-color: white; margin-top: 40rpx; overflow: hidden; }
.list-music-head { height: 60rpx; margin: 30rpx 22rpx 70rpx; font-size: 0;overflow: hidden; }
.list-music-head text:nth-child(1) {height: 60rpx; font-size: 50rpx; }
.list-music-head text:nth-child(2) { font-size: 30rpx; margin: 0 10rpx 0 20rpx; }
.list-music-head text:nth-child(3) { font-size: 26rpx; color: #999; }

.list-music-item { display: flex; align-items: center; margin: 42rpx 42rpx 42rpx;overflow: hidden; }
.list-music-left { width: 58rpx; color: #888; }
.list-music-song { flex: 1; }
.list-music-song view:nth-child(1) { font-size: 28rpx; }
.list-music-song view:nth-child(2) { display: flex; align-items: center; font-size: 20rpx; color: #959595; }
.list-music-song view:nth-child(2) image { width: 53rpx; height: 32rpx; margin-right: 10rpx; flex: none; }
.list-music-item .iconfont { font-size: 50rpx; color: #c7c7c7; margin-left: 10rpx; }
</style>
